<template>
  <div class="m-search-top">
    <div class="m-logo">
      <img src="../../../assets/logo-t.png" border="0"/>
    </div>
    <div class="m-search">
      <div class="m-search-wrap">
        <div class="m-search-icon">
          <i></i>
        </div>
        <div class="m-search-bar">
          <input spellcheck="false" maxlength="33" type="text" placeholder="搜一搜"/>
        </div>
      </div>
    </div>
    <div class="m-mail">
      <img src="../../../assets/image/tip.png" border="0">
    </div>
  </div>
</template>

<script>
export default {
  name: 'mall-search'
}
</script>

<style scoped lang="less">
.m-search-top{
  padding: .2rem .28rem;
  display: flex;
  align-items: center;
  background: #fff;
  .m-logo{
    img{
      width: 1rem;
      display: block;
    }
  }
  .m-search{
    flex: 1;
    padding: 0 .2rem;
    height: .6rem;
    .m-search-wrap{
      background: #eeeeee;
      height: inherit;
      display: flex;
      padding: 0 .2rem;
      align-items: center;
      border-radius: 4px;
      .m-search-icon{
        display: block;
        width: .32rem;
        height: .32rem;
        background: url("../../../assets/image/search.png") no-repeat center/cover;
      }
      .m-search-bar{
        flex: 1;
        padding-left: .1rem;
        height: .54rem;
        input{
          display: block;
          background: transparent;
          border-radius: 0;
          border: none;
          -webkit-appearance: none;
          width: 100%;
          height: 100%;
          line-height: .54rem;
          font-size: .26rem;
          outline: none;
        }
      }
    }
  }
  .m-mail{
    img{
      width: .4rem;
      display: block;
    }
  }
}
</style>
